<script setup>
import {ref, nextTick} from "vue";
import {formatTime} from "@/utils/format.js";
import {useRouter} from "vue-router";

const props = defineProps({
  game: Object
})

const isPopupVisible = ref(false) // 弹出框显示控制
const popupClass = ref('popup-right'); // 弹出框属性
const gameContainerRef = ref(null); // 游戏容器元素实例
const popupRef = ref(null); // 弹出框元素实例

const currentImageIndex = ref(0);
const intervalId = ref(null);

// 防抖逻辑
const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

// 显示弹出框
const showPopup = async () => {
  isPopupVisible.value = true;
  await nextTick();
  adjustPopupPosition();
  startImageRotation();
};

// 隐藏弹出框
const hidePopup = () => {
  isPopupVisible.value = false
  stopImageRotation();
}

// 判断弹出框位置
const adjustPopupPosition = () => {
  if (gameContainerRef.value && popupRef.value) {
    const containerRect = gameContainerRef.value.getBoundingClientRect();
    const popupRect = popupRef.value.getBoundingClientRect();

    if (window.innerWidth - containerRect.right < popupRect.width) {
      popupClass.value = 'popup-left';
    } else {
      popupClass.value = 'popup-right';
    }
  }
};

// 弹出框弹出时每隔1秒显示下一个图片
const startImageRotation = () => {
  intervalId.value = setInterval(() => {
    currentImageIndex.value = (currentImageIndex.value + 1) % props.game.imageView.length;
  }, 1000);
};

// 弹出框关闭时清除定时器
const stopImageRotation = () => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
    intervalId.value = null;
  }
};

// 防抖动包装
const debouncedShowPopup = debounce(showPopup, 200);
const debouncedHidePopup = debounce(hidePopup, 200);

// 游戏详情页
const router = useRouter()
const gameDetail = () => {
  router.push(`/store/detail/${props.game.id}`)
}
</script>

<template>
  <div
      class="game-container"
      @click="gameDetail"
      ref="gameContainerRef"
      @mouseover="debouncedShowPopup"
      @mouseleave="debouncedHidePopup">
    <div class="card">
      <img v-img-lazy="game.widerPicture">
      <div class="game-price">
        <template v-if="game.gamePrice.currentPrice === '0.00'">
          免费开玩
        </template>
        <template v-else>
          <template v-if="game.gamePrice.discount === 0">
            ￥{{ game.gamePrice.originPrice }}
          </template>
          <template v-else>
            <div class="discount">
              <div class="discount-percent">-{{game.gamePrice.discount}}%</div>
              <div class="discount-price">
                <span class="discount-origin-price">￥{{ game.gamePrice.originPrice }}</span>
                <span class="discount-current-price">￥{{ game.gamePrice.currentPrice }}</span>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
    <transition name="fade">
      <div v-if="isPopupVisible" :class="popupClass" class="popup" ref="popupRef">
        <div class="game-name">{{ game.chineseName }}</div>
        <div class="issue-date">发行于: {{ formatTime(game.issueDate) }}</div>
        <div class="image-view">
          <img :src="game.imageView[currentImageIndex]">
        </div>
        <div class="rate"><span>游戏评分:</span><span>{{ game.rate }}</span></div>
        <div class="category ellipsis">
          <div>游戏分类:</div>
          <span v-for="item in game.category" :key="item">{{ item }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.game-container {
  width: 300px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  .card {
    background-color: $textColor;
    color: $backgroundColor;
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    .game-price {
      padding: 10px 6px;
      .discount {
        display: flex;
        font-size: 14px;
        .discount-percent {
          padding: 0 4px;
          background-color: $discountBackgroundColor;
          color: $discountTextColor;
          text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
        }
        .discount-price {
          text-align: center;
          background-color: #525252;
          .discount-origin-price {
            margin: 0 4px;
            position: relative;
            color: #738895;
            &:before {
              content: '';
              left: 0;
              right: 0;
              position: absolute;
              top: 43%;
              border-bottom: 1.5px solid #738895;
              transform: skewY(-8deg);
              box-shadow: 0 0 2px black;
            }
          }
          .discount-current-price {
            padding: 0 4px 0 0;
          }
        }
      }
    }
  }
  .popup {
    padding: 10px;
    pointer-events: none;
    .game-name {
      font-size: 20px;
    }
    .issue-date {
      font-size: 12px;
    }
    .rate {
      margin: 6px 0;
      height: 24px;
      line-height: 24px;
      background-color: #ccc;
      span:first-child {
        padding: 0 4px;
      }
      span:last-child {
        color: $themeColor;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
    .category {
      div {
        font-size: 14px;
      }
      span {
        padding: 2px 4px;
        margin-right: 4px;
        font-size: 12px;
        border-radius: 3px;
        background-color: #cccccc;
      }
    }
  }
}
.popup-right,
.popup-left {
  width: 300px;
  position: absolute;
  top: 84%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
  background-color: $backgroundColor;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  z-index: 10;
  white-space: nowrap; /* 防止弹出框内容换行 */
}
.popup-right {
  left: 102%; /* 定位到 game-container 的右侧 */
}
.popup-left {
  right: 102%; /* 定位到 game-container 的左侧 */
}

.popup-right::after,
.popup-left::after {
  content: "";
  position: absolute;
  top: 20%;
  transform: translateY(-50%);
  border-width: 10px;
  border-style: solid;
  z-index: 11;
}

.popup-right::after {
  left: -18px; /* 箭头宽度 */
  border-color: transparent $backgroundColor transparent transparent;
}

.popup-left::after {
  right: -18px; /* 箭头宽度 */
  border-color: transparent transparent transparent $backgroundColor;
}

/* 添加淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
